<app-loading-content
  [isLoading]="!tradingPairs && !problemGettingPairs"
  [noDataText]="problemGettingPairs ? 'exchange.problem-connecting' : 'exchange.offline'"
  *ngIf="!activeTradingPair"
></app-loading-content>

<div class="-create" *ngIf="activeTradingPair">
  <div [formGroup]="form" class="-form">
    <div class="form-field">
      <label for="fromAmount">
        {{ 'exchange.you-send' | translate }}
        <span *ngIf="form.hasError('min')" class="-error">
          {{ 'exchange.min-amount' | translate }} {{ form.getError('min') }}
        </span>
        <span *ngIf="form.hasError('max')" class="-error">
          {{ 'exchange.max-amount' | translate }} {{ form.getError('max') }}
        </span>
      </label>
      <div class="-inputs">
        <input type="text" formControlName="fromAmount" id="fromAmount">
        <div class="-select">
          <select formControlName="fromCoin">
            <option *ngFor="let pair of tradingPairs" [value]="pair.from">{{ pair.from }}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="form-field">
      <label for="toAmount">{{ 'exchange.you-get' | translate }}</label>
      <div class="-inputs -not-allowed">
        <input type="text" [value]="toAmount" readonly id="toAmount">
        <div class="-input">
          <input type="text" [value]="toCoin" readonly>
        </div>
      </div>
    </div>
    <div class="form-field">
      <label for="toAddress">
        <span>{{ 'exchange.to-address' | translate:{coin: toCoin} }}</span>
        <span class="-select-address" (click)="selectAddress()">
          {{ 'exchange.select' | translate }} <mat-icon>keyboard_arrow_down</mat-icon>
        </span>
      </label>
      <input type="text" formControlName="toAddress" id="toAddress">
    </div>

    <div class="-buttons">
      <mat-checkbox class="-check" (change)="setAgreement($event)" type="checkbox">
        {{ 'exchange.agree-1' | translate }}
        <a href="https://swaplab.cc/terms" target="_blank" rel="noreferrer nofollow">
          {{ 'exchange.agree-2' | translate }}
        </a>
        {{ 'exchange.agree-3' | translate }}
        <a href="https://swaplab.cc/privacy" target="_blank" rel="noreferrer nofollow">
          {{ 'exchange.agree-4' | translate }}
        </a>
      </mat-checkbox>

      <app-button class="primary" #exchangeButton (action)="exchange()" [disabled]="!form.valid">
        {{ 'exchange.exchange-button' | translate }}
      </app-button>
    </div>
  </div>

  <div class="-info" *ngIf="activeTradingPair">
    <div class="-item">
      <div class="-key">{{ 'exchange.you-send' | translate }}</div>
      <div class="-value">{{ sendAmount }} {{ form.get('fromCoin').value }}</div>
    </div>

    <div class="-item">
      <div class="-key">{{ 'exchange.you-get' | translate }}</div>
      <div class="-value">&asymp; {{ toAmount }} {{ toCoin }}</div>
    </div>

    <div class="-item">
      <div class="-key">{{ 'exchange.to-address' | translate:{coin: toCoin} }}</div>
      <div class="-value">{{ form.get('toAddress').value || '-' }}</div>
    </div>

    <div class="-item">
      <div class="-key">{{ 'exchange.price' | translate }}</div>
      <div class="-value">1 {{ form.get('fromCoin').value }} &asymp; {{ activeTradingPair.price.toFixed(6) }} {{ toCoin }}</div>
    </div>

    <div class="-item">
      <div class="-key">{{ 'exchange.time-15' | translate }}</div>
      <div class="-value">&asymp; 15 minutes</div>
    </div>
  </div>
</div>
